<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, shrink-to-fit=no,user-scalable=0">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<style>
html,body,p{
	margin:0;
	padding:0;
}
.swipe{
	height:200px;
}

.swipe img{
	width:100%;
	height:100%;
}
#content{
	margin:10px;
}
.user_info{
	margin-bottom:15px;
}
.user_info p{
	font-size: 14px;
    display: inline-block;
    width: 33.33%;
    text-align: center;
	font-weight: 700;
  margin:10px 0;
}
.user_info p span{
	display: block;
}
.top_user_info{
  text-align: center;
}
.top_user_info .user_logo{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin:10px auto;
}

.top_user_info .user_logo img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
</style>

<body>
  <div id="app">
    <div class="top">
      <div class="top_user_info">
         <div class="user_logo"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587312736842&di=b344f83041fd3eae0c6efaa95b5a3ed7&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F28%2F20170728212204_zcyWe.thumb.700_0.jpeg"></div>
         <p>账号:996674366</p>
      </div>
      <div class="user_info">
        <div><p><span>100</span><span>可用余额</span></p><p><span>100</span><span>冻结资金</span></p><p><span>100</span><span>佣金比例</span></p></div>
    <div><p><span>100</span><span>总订单数</span></p><p><span>100</span><span>已成交数</span></p><p><span>100</span><span>待审核订单</span></p></div>
    
  </div>
    </div>
<div id="content">
<div class="my_footer">
  <mt-cell title="账号管家"></mt-cell>
  <!-- 如果已经绑定则隐藏 -->
  <mt-cell title=" 绑定收款码"  to="/user/paymentAccount" is-link>
	  <img slot="icon" src="http://home.io/static/images/skm.png" width="24" height="24">
	</mt-cell>
	  <mt-cell title=" 绑定银行卡"  to="//github.com" is-link>
	  <img slot="icon" src="http://home.io/static/images/bdyhk.png" width="24" height="24">
	</mt-cell>
<mt-cell title=" 我要充值" to="//github.com" is-link>
  <img slot="icon" src="http://home.io/static/images/cz.png" width="24" height="24" >
</mt-cell>
<mt-cell title=" 我要提现" to="//github.com" is-link>
  <img slot="icon" src="http://home.io/static/images/tx.png" width="24" height="24">
</mt-cell>
<mt-cell title=" 分成记录" to="//github.com" is-link>
  <img slot="icon" src="http://home.io/static/images/tcjl.png" width="24" height="24">
</mt-cell>
<mt-cell title=" 资金流水" to="//github.com" is-link>
  <img slot="icon" src="http://home.io/static/images/zjls.png" width="24" height="24">
</mt-cell>
</div>
</div>
	<!--底部-->
	<mt-tabbar>
  <mt-tab-item id="抢单" @click.native="jump('/index/index')">
    <img slot="icon" src="http://home.io/static/images/qd_a.png">
    抢单
  </mt-tab-item>
  <mt-tab-item id="订单"  @click.native="jump('/order/index')">
    <img slot="icon" src="http://home.io/static/images/order_a.png">
    订单
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="http://home.io/static/images/my_b.png">
    我的
  </mt-tab-item>
</mt-tabbar>
  </div>
</body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      methods: {
                jump(url){
          window.location.href = url
        }
      }
    })
  </script>
</html>